<!--
 * @Author: your name
 * @Date: 2021-08-10 15:54:32
 * @LastEditTime: 2021-08-17 12:03:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Firstproject\html\coffee-blog.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>咖啡星讲堂</title>
    <link rel="stylesheet" href="css/coffee-blog.css">
    <link rel="stylesheet" href="星巴克后台管理/bootstrap.css">
    <link rel="stylesheet" href="星巴克后台管理/bootstrap.js">
    <link rel="stylesheet" href="img/coffee-/download/font_v71d390gh5c/iconfont.css">
</head>
<body>
    
    </div>
    <header>
        <img src="img/coffee-/putao.png" alt="">
        <div class="search">
            
            <button id="tubiao"><i class="iconfont icon-sousuo"></i></button>
            <input type="text" placeholder="请输入..." name="" id="shuru" value="" />
            <button><i>搜索</i></button>
    
       </div>
            <a href=""> <h6>咖啡知识</h6>
                <h1>咖啡的起源与培植</h1><br>
                <h4>在地理概念上，全球性的咖啡种植区有三个——东非和阿拉伯半岛, 
                    东南亚和环太平洋地区，拉丁美洲。 </h4></a>
        
    </header>
    <section>
        <div class="Sheader">
            <a href="">最新 |</a>
            <a href="">咖啡知识 |</a>
            <a href="">咖啡品鉴</a><br>
            <hr>
        </div>
        <!--卡片-->
        <div class="one">
            
            <div class="card" style="width: 25rem;" id="tu1">
                <img src="img/coffee-/putao.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <p class="card-text" id="card1">
                      <label>咖啡起源与培植</label><br>
                      在地理概念上，全球性的咖啡种植区有三个——东非和阿拉伯半岛，东南亚和环太平洋地区，拉丁美洲。 </p>
                </div>
              </div>
            
              <div class="card" style="width: 25rem;" id="tu2">
                <img src="img/coffee-/chazi.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <p class="card-text" id="card1">
                      <label>咖啡调制</label><br>
                      咖啡器并不是调制美味咖啡的唯一因素。咖啡调制的四要素分别是比例、研磨度、水、新鲜度。 </p>
                </div>
              </div>

              <div class="card" style="width: 25rem;" id="tu3">
                <img src="img/coffee-/coffee.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <p class="card-text" id="card1">
                      <label>咖啡起源与培植</label><br>
                      在地理概念上，全球性的咖啡种植区有三个——东非和阿拉伯半岛，东南亚和环太平洋地区，拉丁美洲。 </p>
                </div>
              </div>

              <div class="card" style="width: 25rem;" id="tu4">
                <img src="img/coffee-/chun.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <p class="card-text" id="card1">
                      <label>咖啡调制</label><br>
                      咖啡器并不是调制美味咖啡的唯一因素。咖啡调制的四要素分别是比例、研磨度、水、新鲜度。 </p>
                </div>
              </div>
              <div class="clear"></div>

        </div>

        <!--按钮-->
        <div class="yuedu">
        <button>阅读更多</button>
        </div>
    </section>
    <footer>
        <a class="guan" href="menu.html">星巴克官网</a>
        <a class="tiaojian">隐藏政策&nbsp;条款和条件</a>
    </footer>
</body>
</html>
